﻿<j:tbuttons 
  [editState]="editState"
  (saveBtnClick)="save()"
  (giveupBtnClick)="giveup()"
  (newBtnClick)="new()"
  (deleteBtnClick)="delete()"
  (searchBtnClick)="search($event)"
></j:tbuttons>
<div nz-row class="main-layout">
  <div nz-col nzSpan="6" class="main-layout-left">
    <nz-card class="main-card">
      <nz-tabset nzType="card">
        <nz-tab [nzTitle]="'BasicArchives::UI:SimplyTreeUI.CardTitle.Directory' | abpLocalization">
          <nz-tree-view 
            [nzTreeControl]="treeControl"
            [nzDataSource]="dataSource"
            [nzDirectoryTree]="true"
            [trackBy]="trackBy"
          >
            <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
              <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
              <nz-tree-node-option
                [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectNode(node)"
                (contextmenu)="contextMenu($event, menuLeaf, node)"
              >
                {%{{{ node.name }}}%}
                <nz-dropdown-menu #menuLeaf="nzDropdownMenu">
                  <ul nz-menu>
                    <li nz-menu-item (click)="refAddModal(node.parentId)">{%{{{}%} 'BasicArchives::UI:SimplyTreeUI.ContextMenu.SameLevel' | abpLocalization {%{}}}%}</li>
                    <li nz-menu-item (click)="refAddModal(node.id)">{%{{{}%} 'BasicArchives::UI:SimplyTreeUI.ContextMenu.Children' | abpLocalization {%{}}}%}</li>
                  </ul>
                </nz-dropdown-menu>
              </nz-tree-node-option>
            </nz-tree-node>

            <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
              <nz-tree-node-toggle>
                <i
                  nz-icon
                  nzType="caret-down"
                  nzTreeNodeToggleRotateIcon
                  (nzClick)="toggleExpand(node)"
                ></i>
              </nz-tree-node-toggle>              
              <nz-tree-node-option
                [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectNode(node)"
                (dblclick)="toggleExpand(node)"
                (contextmenu)="contextMenu($event, menuNode, node)"
              >
                {%{{{ node.name }}}%}
                <nz-dropdown-menu #menuNode="nzDropdownMenu">
                  <ul nz-menu>
                    <li nz-menu-item (click)="refAddModal(node.parentId)">{%{{{}%} 'BasicArchives::UI:SimplyTreeUI.ContextMenu.SameLevel' | abpLocalization {%{}}}%}</li>
                    <li nz-menu-item (click)="refAddModal(node.id)">{%{{{}%} 'BasicArchives::UI:SimplyTreeUI.ContextMenu.Children' | abpLocalization {%{}}}%}</li>
                  </ul>
                </nz-dropdown-menu>
              </nz-tree-node-option>
            </nz-tree-node>
          </nz-tree-view>
        </nz-tab>
      </nz-tabset>
    </nz-card>
  </div>
  <div nz-col nzSpan="18" class="main-layout-right">
    <nz-card class="main-card">
      <form nz-form [formGroup]="validateForm">
        <nz-tabset nzType="card">
          <nz-tab [nzTitle]="'BasicArchives::UI:SimplyTreeUI.CardTitle.Base' | abpLocalization">
            <div nz-row>
              {{~ for property in exclude_propertys(self_value_propertys, "TenantId", "Level", "ParentId") ~}}
              <div nz-col [nzSpan]="12">
                <nz-form-item>
                  <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="{{to_camel_case(property.name)}}">
                    {%{{{}%} '{{project_group_name}}::ModelTitle:{{namespace}}.{{class_name}}.{{property.name}}' | abpLocalization {%{}}}%}
                  </nz-form-label>
                  <nz-form-control [nzSm]="16" [nzXs]="24">
                    <input
                      nz-input
                      id="{{to_camel_case(property.name)}}"
                      formControlName="{{to_camel_case(property.name)}}"
                      [placeholder]="'{{project_group_name}}::ModelPlaceHolder:{{namespace}}.{{class_name}}.{{property.name}}' | abpLocalization"
                    />
                  </nz-form-control>
                </nz-form-item>
              </div>
              {{~ end ~}}
            </div>
          </nz-tab>
        </nz-tabset>
      </form>
    </nz-card>
  </div>
</div>
